<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟后台布局+路由使用</title>
    <script src="https://unpkg.com/vue@2.6.13/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.5.1/dist/vue-router.js"></script>
    <style>
        #root {
            display: flex;
            width: 100%;
        }
        
        #root .main {
            width: 80%;
            background: yellow;
            font-size: 360px
        }
        
        #root div ul li {
            padding: 0;
            margin: 0;
            list-style-type: none;
        }
        
        #root div a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div id="root">
        <!-- 菜单区域 -->
        <menu-component :menus='menus'></menu-component>
        <!-- 内容区域 -->
        <main class="main">
            <router-view></router-view>
        </main>
    </div>
    <template id="menu-component">
    <div>
      <ul v-for="(item,index) in menus">
        <router-link :to="item.path">
          <li key="index">{{item.name}}</li>
          <!-- <li key="index" v-if="!item.hidden">{{item.name}}</li> -->
        </router-link>
        
        <menu-component v-if="item.children" :menus="item.children"></menu-component>
      </ul>
    </div>
  </template>

    <script>
        //创建router实例
        let router = new VueRouter({
                routes: [{
                    path: '/gansu',
                    component: {
                        template: '<div>甘肃省</div>'
                    }
                }, {
                    path: '/lanzhou',
                    component: {
                        template: '<div>兰州市</div>'
                    }
                }, {
                    path: '/chengguanqu',
                    component: {
                        template: '<div>城关区</div>'
                    }
                }, {
                    path: '/anningqu',
                    component: {
                        template: '<div>安宁区</div>'
                    }
                }, {
                    path: '/qilihequ',
                    component: {
                        template: '<div>七里河区</div>'
                    }
                }, {
                    path: '/wuweishi',
                    component: {
                        template: '<div>武威市</div>'
                    }
                }, {
                    path: '/liangzhouqu',
                    component: {
                        template: '<div>凉州区</div>'
                    }
                }, {
                    path: '/minqinxian',
                    component: {
                        template: '<div>民勤县</div>'
                    }
                }, {
                    path: '/gulangxian',
                    component: {
                        template: '<div>古浪县</div>'
                    }
                }, {
                    path: '/tianshuishi',
                    component: {
                        template: '<div>天水市</div>'
                    }
                }, {
                    path: '/qingyangshi',
                    component: {
                        template: '<div>庆阳市</div>'
                    }
                }, {
                    path: '/shanxisheng',
                    component: {
                        template: '<div>陕西省</div>'
                    }
                }, {
                    path: '/xianshi',
                    component: {
                        template: '<div>西安市</div>'
                    }
                }, {
                    path: '/yulinshi',
                    component: {
                        template: '<div>榆林市</div>'
                    }
                }, {
                    path: '/yananshi',
                    component: {
                        template: '<div>延安市</div>'
                    }
                }, {
                    path: '/hubeisheng',
                    component: {
                        template: '<div>湖北省</div>'
                    }
                }, {
                    path: '/wuhanshi',
                    component: {
                        template: '<div>武汉市</div>'
                    }
                }, {
                    path: '/hongshanqu',
                    component: {
                        template: '<div>洪山区</div> '
                    }
                }, {
                    path: '/hanyangqu',
                    component: {
                        template: '<div>汉阳区</div>'
                    }
                }, {
                    path: '/wuchangqu',
                    component: {
                        template: '<div>武昌区</div>'
                    }
                }, {
                    path: '/yichangshi',
                    component: {
                        template: '<div>宜昌市</div>'
                    }
                }, {
                    path: '/xiangyangshi',
                    component: {
                        template: '<div>襄阳市</div>'
                    }
                }, {
                    path: '/jingzhoushi ',
                    component: {
                        template: '<div>荆州市</div>'
                    }
                }, {
                    path: '/hunansheng',
                    component: {
                        template: '<div>湖南省</div>'
                    }
                }, {
                    path: '/changshashi',
                    component: {
                        template: '<div>长沙市</div>'
                    }
                }, {
                    path: '/yongzhoushi',
                    component: {
                        template: '<div>永州市</div>'
                    }
                }, {
                    path: '/huaihuashi',
                    component: {
                        template: '<div>怀化市</div>'
                    }
                }, {
                    path: '/hengyangshi',
                    component: {
                        template: '<div>衡阳市</div>'
                    }
                }]
            })
            //创建菜单组件
        const MenuComponent = {
            name: 'MenuComponent',
            template: '#menu-component',
            props: ['menus']
        }
        let vm = new Vue({
            el: '#root',
            router,
            components: {
                MenuComponent
            },
            data: {
                menus: [{
                    name: '甘肃省',
                    path: 'gansu',
                    children: [{
                        name: '兰州市',
                        path: 'lanzhou',
                        children: [{
                            name: '城关区',
                            path: 'chengguanqu'
                        }, {
                            name: '安宁区',
                            path: 'anningqu',
                        }, {
                            name: '七里河区',
                            path: 'qilihequ'
                        }]
                    }, {
                        name: '武威市',
                        path: 'wuweishi',
                        children: [{
                            name: '凉州区',
                            path: 'liangzhouqu'
                        }, {
                            name: '民勤县',
                            path: 'minqinxian'
                        }, {
                            name: '古浪县',
                            path: 'gulangxian'
                        }]
                    }, {
                        name: '天水市',
                        path: 'tianshuishi'
                    }, {
                        name: '庆阳市',
                        path: 'qingyangshi'
                    }]
                }, {
                    name: '陕西省',
                    path: 'shanxisheng',
                    children: [{
                        name: '西安市',
                        path: 'xianshi'
                    }, {
                        name: '榆林市',
                        path: 'yulinshi'
                    }, {
                        name: '延安市',
                        path: 'yananshi'
                    }, {
                        name: '咸阳市',
                        path: 'xianyangshi'
                    }]
                }, {
                    name: '湖北省',
                    path: 'hubeisheng',
                    children: [{
                        name: '武汉市',
                        path: 'wuhanshi',
                        children: [{
                            name: '洪山区',
                            path: 'hongshanqu',
                            hidden: true
                        }, {
                            name: '汉阳区',
                            path: 'hanyangqu',
                            hidden: true
                        }, {
                            name: '武昌区',
                            path: 'wuchangqu',
                            hidden: true
                        }]
                    }, {
                        name: '宜昌市',
                        path: 'yichangshi'
                    }, {
                        name: '襄阳市',
                        path: 'xiangyangshi'
                    }, {
                        name: '荆州市',
                        path: 'jingzhoushi'
                    }]
                }, {
                    name: '湖南省',
                    path: 'hunansheng',
                    children: [{
                        name: '长沙市',
                        path: 'changshashi'
                    }, {
                        name: '永州市',
                        path: 'yongzhoushi'
                    }, {
                        name: '怀化市',
                        path: 'huaihuashi'
                    }, {
                        name: '衡阳市',
                        path: 'hengyangshi'
                    }]
                }]
            }
        })
    </script>
</body>

</html>